<template>
	<view class="work-assess-wrap">
		<view class="work-assess-content" :style="{backgroundImage: assess.backgroundImage}">
			<view class="safe-assess-wrap">
				<view class="safe-assess-circle">
					<image class="circle-image" src="../../../static/img/work/safe_circle_icon.png" mode="aspectFit" style="width: 300rpx; height: 300rpx"></image>
				</view>
				<view class="safe-assess-title">安全综合评估</view>
				<view class="safe-assess-grade">{{assess.headName}}</view>
			</view>
			<view class="custom-flex-wrap">
				<view class="custom-flex-item">
					<view>今日异常总数</view>
					<view class="strong-text">{{exceptionAll.total | showToo}}</view>
				</view>
				<view class="custom-flex-item">
					<view>今日已处置</view>
					<view class="strong-text">{{exceptionAll.handleCount  | showToo}}</view>
				</view>
				<view class="custom-flex-item">
					<view>今日未处置</view>
					<view class="strong-text">{{exceptionAll.noHandleCount  | showToo}}</view>
				</view>
				<view class="custom-flex-item" @click="toAroundPage">
					<view>周边商家</view>
					<view class="strong-text">{{shopNum || 0}}</view>
				</view>
			</view>
			<view></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			assess: {
				type: Object,
				default: () => {}
			},
			exceptionAll: {
				type: Object,
				default: () => {}
			},
			shopNum: {}
		},
		onLoad(option) {
			console.log(option)
			console.log(this.assess)
		},
		filters: {
			showToo(value) {
				return value > 999999 ? '999999+' : value
			}
		},
		methods: {
			toAroundPage() {
				uni.navigateTo({
					url: '../../../pages/around/around'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.work-assess-wrap {
		width: 100%;
		.work-assess-content {
			height: 560rpx;
			background: #fff;
			border-bottom-left-radius: 20%;
			border-bottom-right-radius: 20%;
			.safe-assess-wrap {
				color: $uni-bg-color;
				position: relative;
				.safe-assess-circle {
					padding: 40rpx 0rpx;
					text-align: center;
					.circle-image {
						animation: rotate 2s linear infinite;
					}					
				}
				.safe-assess-title {
					position: absolute;
					top: 130rpx;
					left: 50%;
					transform: translateX(-50%);
				}
				.safe-assess-grade {
					font-size: 46rpx;
					position: absolute;
					bottom: 130rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
			.custom-flex-wrap {
				box-sizing: border-box;
				display: flex;
				flex-flow: row nowrap;
				justify-content: center;
				color: $uni-bg-color;
				font-size: $uni-font-size-lg;
				.custom-flex-item {
					padding: 0px 10rpx;
					text-align: center;
					position: relative;
					.strong-text {
						font-size: 40rpx;
						font-weight: bold;
					}
				}
				.custom-flex-item:not(:last-child) {
					border-right: 1px solid rgba(255, 255, 255, 0.5);
				}
			}
		}
		@keyframes rotate {
		    from {
		      transform: rotateZ(0deg);
		    }
		    to {
		      transform: rotateZ(360deg);
		    }
		}	
	}
</style>
